<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Chinese Annotator</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  </head>

  <body>
    <section id="body" class="width">
      <aside id="sidebar" class="column-left">
        <header>
          <h1>
            <a href="#">Chinese Annotator</a>
          </h1>

          <h2>中文文本标注工具UI测试</h2>
        </header>

        <nav id="mainnav">
          <ul>
            <li>
              <a href="web_util.html">web api util</a>
            </li>
          </ul>
        </nav>
      </aside>
      <section id="content" class="column-right">
        <article>
          <h3>API Testing</h3>
          <blockquote>
            <p>
              this web is for API testing, it list all API that provided by the web service backend.
              user can use this web site to access the web api send GET or POST request
            </p>
          </blockquote>
        </article>
        <article class="expanded">
          <h3>Test Connect Backend</h3>
          <fieldset>
            <form>
              <p>
                web service interface
                <strong>http://localhost:8000/api/project_info/</strong>
                it's function is to test if the frond end web can connect the backend REST API and
                GET project info.
              </p>
              <div id="project_info">
                <a href="#" class="button" v-on:click="get_project_info">Test Connection</a>
                <p>{{ message }}</p>
                <p>{{ project_info }}</p>
              </div>
            </form>
          </fieldset>
        </article>
        <article class="expanded">
          <h3>Load Local Data</h3>
          <fieldset>
            <form>
              <p>
                web service interface
                <strong>http://localhost:8000/api/load_local_dataset/</strong>
                it's function is to upload the data from local data file to Mongo DB. It support
                both GET and POST method
              </p>
              <div id="load_local_data">
                <label for="file_path_local">local file path</label>
                <input type="text" name="file_path_local" size="50" v-model="file_path" />
                <a href="javascript:void(0);" class="button" v-on:click="load_local_data_post"
                  >load local data by POST</a
                >
                <a href="javascript:void(0);" class="button" v-on:click="load_local_data_get"
                  >load local data by GET</a
                >
                <p>{{ message }}</p>
              </div>
            </form>
          </fieldset>
        </article>
        <article class="expanded">
          <h3>Upload remote file</h3>
          <fieldset>
            <form>
              <p>
                web service interface
                <strong>http://localhost:8000/api/upload_remote_file/</strong>
                it's function is to upload the data from data file provied by http request to Mongo
                DB. It only support POST method
              </p>
              <div id="upload_remote_file">
                <input @change="tirggerFile($event)" type="file" name="file" />
                <a href="javascript:void(0);" v-on:click="upload_remote_file" class="button"
                  >Upload</a
                >
                <p>{{ message }}</p>
              </div>
            </form>
          </fieldset>
        </article>

        <article class="expanded">
          <h3>Export Data as File</h3>
          <fieldset>
            <form>
              <p>
                web service interface
                <strong>http://localhost:8000/api/export_data/</strong>
                it's function is to export data from MongoDB as file to ../../data/files/annotation_data.json.
                It only support POST method
              </p>
              <div id="export_data">
                <a href="javascript:void(0);" v-on:click="export_data" class="button"
                  >Export Data</a
                >
                <p>{{ message }}</p>
              </div>
            </form>
          </fieldset>
        </article>

        <article class="expanded">
          <h3>Show unlabled annotation and let use do correction</h3>
          <fieldset>
            <form>
              <p>
                web service interface
                <br />
                <strong>http://localhost:8000/api/load_single_unlabeled/</strong>
                <br />
                <strong>http://localhost:8000/api/annotate_single_unlabeled/</strong>
                it's function is to load an unannotated text from data and let use select a correct
                one for it and submit it to DB again
              </p>
              <div id="load_and_annotation_data">
                <a href="javascript:void(0);" v-on:click="load_single_unlabeled" class="button"
                  >Load an unAnnotated data</a
                >
                <h3>{{ auto_label }}</h3>
                <p>{{ annotation_text }}</p>
                <!--<p>Writers From the Right and Left on Trump Jr., the Future of the F.B.I.ORG, Health Care and More</p>-->

                <a href="javascript:void(0);" v-on:click="annotate_single_unlabeled" class="button"
                  >right</a
                >
                <a
                  href="javascript:void(0);"
                  v-on:click="click_wrong_button"
                  class="button button-reversed"
                  >wrong</a
                >
                &nbsp;&nbsp;
                <!-- <a href="#" class="button">undo</a>
                                <a href="#" class="button button-reversed">cancel</a> -->
                <br />
                <p></p>
                <div v-show="incorrect_label">
                  <label for="file_path_local">Select a right class</label>
                  <select v-model="item">
                    <option v-for=" item in class_list"> {{ item.name }}</option>
                  </select>
                  <a href="javascript:void(0);" v-on:click="annotate_single_correct" class="button"
                    >submit</a
                  >
                </div>
              </div>
            </form>
          </fieldset>
        </article>

        <article class="expanded">
          <h3>Show Annotation History</h3>
          <fieldset>
            <p>
              web service interface
              <strong>http://localhost:8000/api/query_annotation_history/</strong>
              it's function is to query the user annotation history it can define which page and how
              many number on a page to query
            </p>
            <div id="annotation_history">
              <h3>History</h3>
              <label for="annotation_number">History Number</label>
              <input type="number" name="annotation_number" v-model="history_annotation_number" />
              <label for="annotation_page">History Number</label>
              <input type="number" name="annotation_page" v-model="history_annotation_page" />
              <a href="javascript:void(0);" class="button" v-on:click="query_annotation_history"
                >Query</a
              >
              <br />
              <table>
                <tr>
                  <th>Label</th>
                  <th>Text</th>
                </tr>
                <tr v-for=" annotation in annotation_list">
                  <td>{{ annotation.label }}</td>
                  <td>{{ annotation.text }}</td>
                </tr>
              </table>

              <p>&nbsp;</p>
            </div>
          </fieldset>
        </article>

        <footer class="clear">
          <p>
            &copy; 2017 sitename. <a href="http://zypopwebtemplates.com/">Free CSS Templates</a> by
            ZyPOP
          </p>
        </footer>
      </section>

      <div class="clear"></div>
    </section>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="js/core.js"></script>
  </body>
</html>
